<template>
	<view>
		<tt-bar leftIcon="icon-back" :title="canXuanke ? '选课' : '选课结果'"></tt-bar>
		<view class="shopList" v-if="canXuanke">
			<block v-for="(item, index) in classList" :key="index">
				<view class="shopItem">
					<text class="shopName">{{ item.storeName }}</text>
					<view class="classBox">
						<block v-for="(itm, idx) in item.courseData" :key="idx">
							<view class="classItem" :class="[itm.isSelected ? 'active' : '']" :data-index="index" :data-idx="idx" @tap="selectClass(index, idx)">
								<text class="classname">{{ itm.courseName }}</text>
								<text class="iconfont icon-check" v-if="itm.isSelected"></text>
							</view>
						</block>
					</view>
				</view>
			</block>
		</view>

		<view class="xuankeList" v-if="!canXuanke && xuankeList.length>0" :style="{ height: pgHeight + 'px' }">
			<text class="title2">已选定以下课程</text>
			<view class="xuankeRow" v-for="(item, index) in xuankeList" :key="index">
				<text class="shopName">{{ item.shopName }}</text>
				<view class="classRow">
					<text class="iconfont icon-yuanxingxuanzhongfill"></text>
					<text class="className">{{ item.className }}</text>
				</view>
			</view>
		</view>
		<view class="btmOp" v-if="canXuanke && classList.length>0"><button @tap="postClass">提交</button></view>
		<emptyBox v-if="classList.length<1 || xuankeList.length>1"></emptyBox>
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
import ttBar from '@/components/ttBar/ttBar.vue';
export default {
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			isLogin: state => state.user.isLogin
		})
	},
	components: {
		ttBar
	},
	data() {
		return {
			pgHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(90),
			oid: '',
			gid: 0,
			canXuanke: true,
			classList: [],
			reportClass: [],
			actId: 0,
			xuankeList: [],
			code:0,
			yixuan:[],
			selectNumActivity: 0
		};
	},
	methods: {
			
		getcode() {
			this.$store
				.dispatch('apiReportSelectClassyx', {
					goodid: this.oid.toString()							
				})
				.then(res => {
					
					this.code = res.data.code;
					this.yixuan = res.data.data;
					
										
				});
		},
		getClass() {
			this.$store
				.dispatch('apiGetSelectClass', {
					goodid: this.oid.toString(),
					uid: this.userInfo.userId
				})
				.then(res => {
						
					if (this.code == 1) {
						this.canXuanke = true;
						this.selectNumActivity = res.data.data.items[0].selectNumActivity;
						res.data.data.items.forEach((x, i) => {
							x.courseData = JSON.parse(x.courseData);
							x.courseData.forEach((m, n) => {
								m.isSelected = false;
							});
						});
						this.classList = res.data.data.items;
						console.log(this.classList.length)
						this.$store
							.dispatch('apiReportSelectClassyx', {
								goodid: this.oid.toString(),
								uid: this.userInfo.userId
							})
							.then(res => {
								console.log(res)
								
								this.actId = res.data.actId;
								res.data.data = JSON.parse(res.data.data);
								this.classList.forEach((x, i) => {
									res.data.data.forEach((j, z) => {
										if (x.storeId == j.shopId) {
											this.classList[i].courseData.forEach((q, c) => {
												if (q.courseName == j.className) {
													this.classList[i].courseData[c].isSelected = true;
												}
											});
										}
									});
								});
							});
					} else {
						this.canXuanke = false;
						this.yixuan = JSON.parse(this.yixuan)
						this.xuankeList = this.yixuan ;
						
						
					}
				});
		},
		selectClass(_index, _idx) {
			this.classList[_index].courseData.forEach((x, i) => {
				if (i == _idx) {
					if (this.classList[_index].courseData[i].isSelected) {
						this.classList[_index].courseData[i].isSelected = !this.classList[_index].courseData[i].isSelected;
					} else {
						this.classList[_index].courseData[i].isSelected = true;
					}
				} else {
					this.classList[_index].courseData[i].isSelected = false;
				}
			});
		},
		postClass() {
			this.reportClass = [];
			let _arr = [];
			this.classList.forEach((x, i) => {
				x.courseData.forEach((m, n) => {
					if (m.isSelected) {
						let _data = {
							shopId: x.storeId,
							shopName: x.storeName,
							className: m.courseName
						};
						_arr.push(_data);
						this.reportClass.push(_data);
					}
				});
				
			});

			let _postData = {
				uid: this.userInfo.userId, //用户ID
				activityId: this.actId, //联盟活动ID
				orderNo: this.oid, //订单编号
				actCoursedata: JSON.stringify(_arr)
			};
		
			if (this.reportClass.length < 1) {
				uni.showToast({
					title: '请至少选择一门课程',
					icon: 'none'
				});
			} else if (this.reportClass.length > this.selectNumActivity) {
				
				
				uni.showToast({
					title: '最多只能选择' + this.selectNumActivity + '门课程',
					icon: 'none'
				});
			} else {
				if (this.reportClass.length <= this.selectNumActivity) {
					this.$store.dispatch('apiReportSelectClass', _postData).then(res => {
						if (res.data.code == 1) {
							uni.showToast({
								title: '选课提交成功',
								icon: 'none'
							});
							this.canXuanke = false;
							uni.$emit('xuanke');
							this.getClass();
						} else {
						
							uni.showToast({
								title: '选课提交失败',
								icon: 'none'
							});
						}
					});
				} else {
					
					uni.showToast({
						title: '选课提交失败',
						icon: 'none'
					});
				}
			}
		}
	},
	onLoad(cfm) {
		this.gid = cfm.gid;
		this.oid = cfm.oid;
		this.getcode();
		this.getClass();
	}
};
</script>

<style lang="less">
.xuankeList {
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	.title2 {
		font-size: 32upx;
		padding: 30upx 64upx;
	}
	.xuankeRow {
		border-top: 1px solid #f6f6f6;
		padding: 40upx 64upx;
		display: flex;
		flex-direction: column;
		.shopName {
			font-size: 32upx;
			margin-bottom: 20upx;
		}
		.classRow {
			display: flex;
			align-items: center;
			.iconfont {
				font-size: 40upx;
				margin-right: 10upx;
				color: #ffb423;
			}
			.className {
				font-size: 30upx;
				color: #9f9e9e;
			}
		}
	}
}
.btmOp {
	position: fixed;
	width: 100%;
	height: 120upx;
	background-color: #ffffff;
	bottom: 0;
	left: 0;
	padding: 0 50upx;
	display: flex;
	align-items: center;
	button {
		height: 80upx;
		width: 100%;
		background-color: #ffb423;
		color: #ffffff;
		font-size: 32upx;
		border-radius: 40upx;
	}
}
page {
	background-color: #f6f6f6;
}
.shopList {
	display: flex;
	flex-direction: column;
	padding: 20upx;
	padding-bottom: 120upx;
	.shopItem {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		border-radius: 16upx;
		box-shadow: 0rpx 5rpx 24rpx 0rpx rgba(201, 202, 208, 0.15);
		padding: 32upx 32upx 12upx 32upx;
		margin-bottom: 20upx;
		.shopName {
			font-size: 32upx;
			margin-bottom: 24upx;
		}
		.classBox {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.classItem {
				position: relative;
				display: flex;
				align-items: center;
				border: 1px solid #9f9e9e;
				justify-content: center;
				width: 45%;
				flex-shrink: 0;
				border-radius: 10upx;
				margin-bottom: 20upx;
				padding: 10upx 0;
				overflow: hidden;
				.classname {
					color: #9f9e9e;
					font-size: 32upx;
				}
				.iconfont {
					position: absolute;
					display: block;
					background-color: #ffb423;
					top: 0;
					right: 0;
					color: #ffffff;
					height: 30upx;
					width: 50upx;
					text-align: center;
					line-height: 30upx;
					font-size: 32upx;
					border-bottom-left-radius: 10upx;
				}
			}
			.active {
				border: 1px solid #ffb423;
				.classname {
					color: #ffb423;
				}
			}
		}
	}
}
</style>
